<template>
  <div>
    <div class="topSearch">
      <el-form :model="formState" class="demo-form-inline">
        <div class="oneLine">
          <el-form-item class="s1" label="入驻时间">
            <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item class="s1" label="结束时间">
            <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
        </div>
        <div class="oneLine" style="margin-top: 20px">
          <el-form-item class="s1" label="是否空巢">
            <el-input placeholder="是否空巢"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="鸟类名称">
            <el-input placeholder="鸟类名称"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="成鸟数量">
            <el-input placeholder="成鸟数量"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="垫巢材料">
            <el-input placeholder="垫巢材料"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="繁殖阶段">
            <el-input placeholder="繁殖阶段"></el-input>
          </el-form-item>
        </div>
        <div class="oneLine" >
          <el-form-item class="s1" label="卵数量">
            <el-input v-model="formState.long" placeholder="卵数量"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="雏鸟数量">
            <el-input v-model="formState.weight" placeholder="雏鸟数量"></el-input>
          </el-form-item>
          <el-form-item class="s2" style="min-width: 500px;" label="繁育时间">
            <el-date-picker v-model="formState.time" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="oneLine" style="margin-top: 20px">
          <el-form-item class="s1" label="生态环境">
            <el-input placeholder="生态环境"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="森林起源">
            <el-input placeholder="森林起源"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="小生境">
            <el-input placeholder="小生境"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="乔木高度">
            <el-input placeholder="乔木高度"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="乔木郁闭度">
            <el-input placeholder="乔木郁闭度"></el-input>
          </el-form-item>
        </div>

        <div class="oneLine" >
          <el-form-item class="s1" label="乔木胸径">
            <el-input v-model="formState.long" placeholder="乔木胸径"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="乔木优势品种">
            <el-input v-model="formState.weight" placeholder="乔木优势品种"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="center">

    </div>

    <div class="tab">
      <el-table ref="multipleTable" stripe :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" max-height="660" height="660" >
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="序号" >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="物种" >
        </el-table-column>
        <el-table-column prop="name"  label="图像" >
          <template slot-scope="scope">
            <!-- <div><img style="width: 80px; height: 80px;" src="../../../assets/bird.png" alt=""></div> -->
          </template>
        </el-table-column>
        <el-table-column prop="time" label="监测时间" >
        </el-table-column>
        <el-table-column prop="name" label="重量" >
        </el-table-column>
        <el-table-column prop="name" label="体长" >
        </el-table-column>
        <el-table-column prop="name" label="温度" >
        </el-table-column>
        <el-table-column prop="name" label="湿度" >
        </el-table-column>
        <el-table-column  prop="name" label="监测鸟箱" >
        </el-table-column>
        <el-table-column prop="name" label="数据审核" >
        </el-table-column>
        <el-table-column prop="name" label="行为" >
        </el-table-column>
        <el-table-column prop="set" label="操作">
          <template slot-scope="scope">
            <i style="cursor: pointer;" @click="edit(scope.row)" class="el-icon-edit"></i>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="pageParams.total" :currentPage="pageParams.currentPage" :pageSize="pageParams.pageSize" @handleCurrentChange="handleCurrentChange"></Pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formState: {

      },
      tableData: [
        // {  date: '2016-05-02',  name: '王小虎',  address: '上海市普陀区金沙江路 1518 弄'  }
      ],
      pageParams : {
              currentPage: 1,
              pageSize:10 ,
              total: 0
          }
    }
  },
  methods: {
    reset() {},
    onSubmit() {},
    handleCurrentChange(val) {
      this.pageParams.currentPage = val ;
    },
    handleSelectionChange(a, b){

    },
    edit(){

    }
  },

}
</script>

<style lang="scss" scoped>
.topSearch {
  margin-bottom: 20px;
  background: linear-gradient(90deg, rgba(25, 99, 135, 0.25) 0%, rgba(25, 99, 135, 0.35) 100%);
  padding: 0 25px;
  .oneLine {
    display: flex;
  }


}


::v-deep {
  .el-input__prefix {
    right: 0.05rem;
    left: auto;
  }

  .el-date-editor .el-range__icon {
    position: absolute;
    right: 0.1rem;
  }

  .el-form-item {
    min-width: 320px;
    margin-bottom: 0;
  }

  .el-form-item__label {
    color: #fff;
    margin-right: 10px;
    width: 120px;
  }

  .s1 {
    .el-input {
      width: 188px;
    }

    .el-input__inner {
      width: 188px;
      height: 32px;
      background: rgba(18, 28, 38, 0.1);
      border: none;
      color: #fff;
    }
  }

  .s2 {
    .el-input__inner {
      height: 32px;
      background: rgba(18, 28, 38, 0.1);
      color: #fff;
      border: none;
    }

    .el-range-separator {
      color: #fff;
    }

    .el-range-input {
      background: none;
    }
  }

  .el-button {
    min-width: 98px;
    height: 32px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-image: linear-gradient(216deg, rgba(178, 255, 181, 0) 16%, rgba(178, 255, 181, 0.27) 78%) 1;
  }

  .el-table {
    overflow-y: auto;
    background: transparent;
    border: none;
  }

  .el-table::before {
    height: 0;
  }

  .el-table__header-wrapper tr {
    height: 40px;
    background: linear-gradient(90deg, rgba(115, 255, 247, 0.208) 0%, rgba(115, 255, 247, 0.16) 100%) !important;

    .el-checkbox__inner {
      background: transparent;
      border: 1px solid rgba(115, 255, 247, 0.5);
    }
  }

  .el-table .el-table__cell {
    background: none !important;
    height: 40px;
    color: #fff;
    font-weight: normal;
    border: none !important;
    text-align: center;
  }

  .el-table__body {
    .el-table__row {
      height: 100px;
      background: transparent;
      color: #fff;

      .el-checkbox__inner {
        background: transparent;
        border: 1px solid rgba(115, 255, 247, 0.5);
      }
    }

    .el-table__row--striped {
      background: linear-gradient(90deg, rgba(115, 255, 247, 0.078) 0%, rgba(115, 255, 247, 0.06) 100%);

    }
  }
}
</style>